<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="mypage_theme_bg" :class="{ 'theme_shop': module.member}">
			<view class="interval" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<view class="user_ww_info">
				<image @click="onTokenJump('/pagesMy/my/editInfo')" :src="userInfo.headImg || 'http://qn.kemean.cn/upload/202007/08/default_head_img.png'"
				 mode="aspectFill"></image>
				<view class="user_ww_basicinfo" @click="onTokenJump('/pagesMy/my/editInfo')">
					<text>{{ userInfo.nickName || '未登录' }}</text>
					<!-- <view v-if="userInfo.nickName">积分：{{ userInfo.integralCount || 0 }}</view> -->
					<view v-if="userInfo.nickName">{{ userInfo.memberRoleName }}</view>
				</view>
				<view class="signin" v-if="module.signin" @click="onSign">签到领福利</view>
			</view>
			<view class="wallet_box">
				<view class="integral">
					<view class="balance">{{ userInfo.integralCount || "0.00" }}</view>
					<text class="depict">积分</text>
				</view>
				<text class="separate"></text>
				<view class="balance_box">
					<view>
						¥
						<text class="balance">{{ balanceInfo.balance || '0.00' }}</text>
					</view>
					<text class="depict">钱包余额</text>
				</view>
				<text class="separate"></text>
				<view class="my_wallet" @click="onTokenJump('/pagesMy/my/wallet/wallet')">
					<image src="../../static/icon/ic_my_wallet.png" mode="aspectFill"></image>
					<text>我的钱包</text>
				</view>
			</view>
			<view class="balanced_cards_box" v-if="module.member">
				<view class="balanced_box">
					专享VIP折扣
					<button @click="onTokenJump('/pagesMy/my/vip/vip')">GO ></button>
				</view>
			</view>
		</view>
		<view class="user_order" :class="{ 'theme_shop': module.member}">
			<view class="user_order_text">
				<view>我的订单</view>
				<text @click="onTokenJump('/pages/my/order/orderList')">查看全部订单 ></text>
			</view>
			<view class="user_order_content">
				<view @click="onTokenJump('/pages/my/order/orderList?type=1001')">
					<image src="../../static/icon/theme/ic_order_payment.png" mode="aspectFit"></image>
					<text>待付款</text>
					<view class="badge" v-if="userInfo.waitPayCount > 0">{{ userInfo.waitPayCount }}</view>
				</view>
				<view @click="onTokenJump('/pages/my/order/orderList?type=1201')">
					<image src="../../static/icon/theme/ic_order_delivery.png" mode="aspectFit"></image>
					<text>待发货</text>
					<view class="badge" v-if="userInfo.waitSendCount > 0">{{ userInfo.waitSendCount }}</view>
				</view>
				<view @click="onTokenJump('/pages/my/order/orderList?type=1301')">
					<image src="../../static/icon/theme/ic_order_finished.png" mode="aspectFit"></image>
					<text>待收货</text>
					<view class="badge" v-if="userInfo.waitReceiveCount > 0">{{ userInfo.waitReceiveCount }}</view>
				</view>
				<view @click="onTokenJump('/pages/my/order/orderList?type=1401')">
					<image src="../../static/icon/theme/ic_order_rate.png" mode="aspectFit"></image>
					<text>评价</text>
					<view class="badge" v-if="userInfo.waitEvaluateCount > 0">{{ userInfo.waitEvaluateCount }}</view>
				</view>
				<view v-if="module.afterSale" @click="onTokenJump('/pages/my/order/orderList?type=1500')">
					<image src="../../static/icon/theme/ic_order_refund.png" mode="aspectFit"></image>
					<text>售后</text>
				</view>
			</view>
		</view>
		<view class="user_myservice">
			<text>我的服务</text>
			<view class="user_myservice_content">
				<view @click="onTokenJump('/pagesMy/my/distribution/extendCenter')">
					<image src="../../static/icon/theme/ic_my_promotion.png" mode="aspectFit"></image>
					<text>推广中心</text>
				</view>
				<view @click="onTokenJump('/pages/my/address/addressList')">
					<image src="../../static/icon/theme/ic_my_address.png" mode="aspectFit"></image>
					<text>收货地址</text>
				</view>
				<view v-if="!module.navigationMessage" @click="onTokenJump('/pages/message/message')">
					<image src="../../static/icon/theme/ic_my_l.png" mode="aspectFit"></image>
					<text>消息通知</text>
				</view>
				<view @click="onTokenJump('/pages/my/coupon')">
					<image src="../../static/icon/theme/ic_my_coupon.png" mode="aspectFit"></image>
					<text>优惠券</text>
				</view>
				<view @click="onTokenJump('/pagesMy/my/collect')">
					<image src="../../static/icon/theme/ic_my_collect.png" mode="aspectFit"></image>
					<text>我的收藏</text>
				</view>
				<view v-if="module.agentSettle" @click="onIdentity(3000)">
					<image src="../../static/icon/theme/ic_my_agent.png" mode="aspectFit"></image>
					<text>代理商申请</text>
				</view>
				<view v-if="module.shareholderSettle" @click="onIdentity(2000)">
					<image src="../../static/icon/theme/ic_my_shareholder.png" mode="aspectFit"></image>
					<text>股东申请</text>
				</view>
				<view v-if="module.shop" @click="onTokenJump('/pages/mall/entering')">
					<image src="../../static/icon/theme/ic_my_business.png" mode="aspectFit"></image>
					<text>商家入驻</text>
				</view>
				<view v-if="module.integralMall" @click="onTokenJump('/pages/integral/integralMall')">
					<image src="../../static/icon/theme/ic_my_integral.png" mode="aspectFit"></image>
					<text>积分商城</text>
				</view>
				<view v-if="module.farmGame" @click="onTokenJump('/pagesMy/my/farmGame/farm')">
					<image src="../../static/icon/theme/ic_my_i.png" mode="aspectFit"></image>
					<text>农场游戏</text>
				</view>
				<view v-if="module.lottery" @click="onTokenJump('/pagesMy/my/vip/lottery')">
					<image src="../../static/icon/theme/ic_luckdraw.png" mode="aspectFit"></image>
					<text>幸运转盘</text>
				</view>
				<view v-if="module.bargain" @click="onTokenJump('/pages/bargain/myBargain')">
					<image src="../../static/icon/theme/ic_my_m.png" mode="aspectFit"></image>
					<text>我的砍价</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button v-if="module.shareGuest" open-type="share">
					<image src="../../static/icon/theme/ic_my_share.png" mode="aspectFit"></image>
					<text>分享锁客</text>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view v-if="module.shareGuest" @click="onShare">
					<image src="../../static/icon/theme/ic_my_share.png" mode="aspectFit"></image>
					<text>分享锁客</text>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="user_myservice">
			<view class="user_myservice_content">
				<view @click="showPopup = true">
					<image src="../../static/icon/theme/ic_my_j.png" mode="aspectFit"></image>
					<text>关注公众号</text>
				</view>
				<view @click="onTokenJump('/pagesMy/my/feedback')">
					<image src="../../static/icon/theme/ic_my_feedback.png" mode="aspectFit"></image>
					<text>意见反馈</text>
				</view>
				<view @click="onTokenJump('/pagesMy/my/about')">
					<image src="../../static/icon/theme/ic_my_about.png" mode="aspectFit"></image>
					<text>关于我们</text>
				</view>
				<view @click="onTokenJump('/pagesMy/my/setUp')">
					<image src="../../static/icon/theme/ic_my_k.png" mode="aspectFit"></image>
					<text>设置</text>
				</view>
			</view>
		</view>
		<z-popup v-model="signPopup" type="2000" @change="setSignPopup">
			<view class="popup_box">
				<view class="popup_title">
					<view>已累计签到 {{ signDay }} 天</view>
					<text>
						连续签满7天可领取全部奖励，暂时不提供补签
						<br />
						本周漏签0天/每周一重置
					</text>
				</view>
				<view class="sign_box">
					<view class="sign_item_box" v-for="(item, index) of signInfo" :key="index">
						<!-- 可签到 -->
						<view class="sign_item" v-if="item.isSignIn" @click="signIn(item)">
							<view class="sign_day">{{ item.day }}天</view>
							<view class="sign_img_box">
								<image v-if="item.rewardType" src="../../static/icon/ic_signin_integral.png" mode="aspectFit"></image>
								<image v-else src="../../static/icon/ic_signin_coupon.png" mode="aspectFit"></image>
							</view>
							<text v-if="item.rewardType">{{ item.integral }}积分</text>
							<text v-else>{{ item.discountTitle }}</text>
						</view>
						<!-- 已签到 -->
						<view class="sign_item" v-else-if="item.flag">
							<view class="sign_day">{{ item.day }}天</view>
							<view class="sign_img_box">
								<image v-if="item.rewardType" src="../../static/icon/ic_signin_integral.png" mode="aspectFit"></image>
								<image v-else src="../../static/icon/ic_signin_coupon.png" mode="aspectFit"></image>
								<image class="signed" src="../../static/icon/ic_signin_success.png" mode="aspectFit"></image>
							</view>
							<text v-if="item.rewardType">{{ item.integral }}积分</text>
							<text v-else>{{ item.discountTitle }}</text>
						</view>
						<!-- 未签到 -->
						<view class="sign_item" v-else>
							<view class="sign_day">{{ item.day }}天</view>
							<view class="sign_img_box">
								<image v-if="item.rewardType" class="unsign" src="../../static/icon/ic_signin_integral.png" mode="aspectFit"></image>
								<image v-else class="unsign" src="../../static/icon/ic_signin_coupon.png" mode="aspectFit"></image>
							</view>
							<text v-if="item.rewardType" class="unsign">{{ item.integral }}积分</text>
							<text v-else class="unsign">{{ item.discountTitle }}</text>
						</view>
					</view>
				</view>
				<view class="sign_rule" @click="onPageJump('/pages/user/protocol?type=' + 1601)">活动规则</view>
			</view>
		</z-popup>
		<zPopup v-model="coinPopup" type="2000">
			<image class="coin" v-if="rewardType" src="http://qn.kemean.cn/upload/202008/03/1596433438498x8zcj5eb.png" mode="aspectFill"></image>
			<image v-else src="http://qn.kemean.cn/upload/202008/03/1596433423698afcjzykp.png" mode="aspectFill"></image>
		</zPopup>
		<attention-public v-model="showPopup" :showBtn="false"></attention-public>
	</view>
</template>

<script>
	import attentionPublic from '@/components/module/attention_public';
	import zPopup from '@/components/common/popup.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// #ifdef APP-PLUS
	import { appShare } from '@/config/utils.js';
	// #endif
	export default {
		components: {
			attentionPublic,
			zPopup
		},
		data() {
			return {
				statusBarHeight: 0,
				showPopup: false,
				shareInfo: {},
				balanceInfo: {},
				module: {},
				signPopup: false,
				coinPopup: false,
				rewardType: false,
				//couponPopup: false,
				signInfo: {},
				signDay: 0
			};
		},
		computed: {
			...mapState(['userInfo', 'signPopupShow'])
		},
		//第一次加载
		onLoad(e) {
			this.module = this.$base.module;
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			this.getConfInfo();
		},
		//页面显示
		onShow() {
			if (this.signPopupShow) {
				this.onSign();
			}
			this.judgeLogin(() => {
				this.pageData();
				this.getSettleTatus();
			});
		},
		//方法
		methods: {
			...mapMutations(['setUserInfo', 'setSignPopup']),
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			onShare() {
				// #ifdef APP-PLUS
				appShare(this.shareInfo);
				// #endif
			},
			getConfInfo() {
				this.$http
					.get('api/open/v1/conf', {
						needLogin: false
					})
					.then(res => {
						this.shareInfo = res.share;
					});
			},
			pageData() {
				this.$http.get('api/mime/v1/info').then(res => {
					this.setUserInfo(res);
				});
				this.$http.get('api/mime/wallet/v1/info').then(res => {
					this.balanceInfo = res;
				});
			},
			onSign() {
				this.judgeLogin(() => {
					this.signPopup = true;
					//this.setSignPopup(true);
					this.$http.get('api/sign_in/v1/list').then(res => {
						this.signInfo = res.signInInfoBO;
						this.signDay = res.signInNum;
					});
				});
			},
			signIn(item) {
				this.signPopup = false;
				//this.setSignPopup(false);
				if (item.rewardType) {
					this.rewardType = true;
				}
				this.$http.get('api/sign_in/v1/clock_in').then();
				setTimeout(() => (this.coinPopup = true), 300);
				setTimeout(() => (this.coinPopup = false), 2500);
			},
			getSettleTatus() {
				this.$http.get('api/recommend/v1/settle_tatus').then(res => {
					this.settleTatus = res;
				});
			},
			onIdentity(type) {
				this.judgeLogin(() => {
					let url = '';
					if (type == 2000) {
						if ([1000, 1101].includes(this.settleTatus.distribution)) {
							url = '/pagesMy/my/character/partnerEntering';
						} else if ([1201, 1301].includes(this.settleTatus.distribution)) {
							url = '/pagesMy/my/character/partnerEntering?state=' + this.settleTatus.distribution;
						} else {
							url = '/pagesMy/my/distribution/extendCenter';
						}
					} else if (type == 3000) {
						if ([1000, 1101].includes(this.settleTatus.proxy)) {
							url = '/pagesMy/my/character/operationEntering';
						} else if ([1201, 1301].includes(this.settleTatus.proxy)) {
							url = '/pagesMy/my/character/operationEntering?state=' + this.settleTatus.proxy;
						} else {
							url = '/pagesMy/my/distribution/extendCenter';
						}
					}
					uni.navigateTo({
						url: url
					});
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.mypage_theme_bg {
		background-color: #333;
		background-position: center bottom;
		background-size: 100% auto;
		background-repeat: no-repeat;
		@include theme("my_bg_image");
		padding-bottom: 100rpx;
		&.theme_shop {
			padding-bottom: 0rpx;
		}
		.user_ww_info {
			padding: 60upx 40upx 35upx 40upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				border: 1rpx solid #fff;
			}

			.user_ww_basicinfo {
				width: calc(100% - 160upx);
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				padding: 15upx 30upx;
				flex: 1;

				text {
					font-size: 32upx;
					color: #fff;
					margin-bottom: 20upx;
				}

				view {
					padding: 10upx 24upx;
					font-size: 24upx;
					color: #fff;
					background-color: rgba($color: #fff, $alpha: 0.2);
					border-radius: 21px;
				}
			}

			.signin {
				color: #fff;
				background-color: $themeColor;
				border-radius: 32rpx;
				padding: 0 24rpx;
				//padding: 10rpx 20rpx;
				height: 50rpx;
				font-size: 24rpx;
				line-height: 50rpx;
				display: flex;
				align-items: center;

				&::after {
					margin-left: 12rpx;
					content: '';
					//background-image: url(../../static/icon/ic_to.png);
					@include bis('../../static/icon/ic_to_white.png');
					width: 12rpx;
					height: 24rpx;
				}
			}

			.user_ww_set {
				width: 44upx;
				height: 42upx;
			}
		}
	}

	.wallet_box {
		//padding-bottom: 40rpx;
		padding: 0 80rpx 40rpx 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		//justify-content: space-around;
		.balance_box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			view {
				color: #fff;
				font-size: 24rpx;
			}
		}

		.depict {
			color: rgba($color: #fff, $alpha: 0.4);
			font-size: 24rpx;
		}

		.balance {
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
		}

		.separate {
			width: 1rpx;
			height: 40rpx;
			background-color: rgba($color: #fff, $alpha: 0.4);
		}

		.integral {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.my_wallet {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 31rpx;
			}

			text {
				color: #fff;
				font-size: 24rpx;
				font-weight: bold;
				margin-top: 12rpx;
			}
		}
	}

	.balanced_cards_box {
		padding: 0upx 30upx 0upx 30upx;

		.balanced_box {
			padding: 0upx 32upx 0upx 80upx;
			height: 104upx;
			background-image: url(../../static/icon/vip/img_vip.png);
			background-size: 100% auto;
			//background-color: rgba(0,0,0,1);
			//border-radius: 8upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: relative;
			font-size: 24rpx;

			color: #ffffff;

			>button {
				margin-left: 24rpx;
				width: 114rpx;
				height: 56rpx;
				background-image: linear-gradient(270deg, #eccc82 0%, #d4a842 100%);
				border-radius: 32rpx;
				font-size: 28rpx;
				line-height: 56rpx;
				color: #ffffff;
			}
		}
	}

	.user_order {
		background: #ffffff;
		//margin: 20rpx;
		padding: 24rpx;
		margin: -100rpx 32rpx 24rpx 32rpx;
		//padding: 30rpx 0rpx 40rpx 0rpx;
		display: flex;
		flex-direction: column;
		border-radius: 8rpx;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(77, 77, 77, 0.1);
		overflow: hidden;
		&.theme_shop {
			margin-top: 32rpx;
		}
		.user_order_text {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;
			//padding: 30rpx;

			>view {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
			}

			>text {
				font-size: 24rpx;
				color: #999999;
			}
		}

		.user_order_content {
			display: flex;
			justify-content: space-around;
			align-items: center;

			>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				position: relative;

				>image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 20rpx;
				}

				.badge {
					position: absolute;
					top: -16rpx;
					right: 0;
					background-color: #f56c6c;
					border-radius: 20rpx;
					color: #fff;
					display: inline-block;
					font-size: 24rpx;
					height: 32rpx;
					line-height: 28rpx;
					padding: 0 8rpx;
					text-align: center;
					white-space: nowrap;
					border: 2rpx solid #fff;
					transform: translateX(50%);
				}
			}
		}
	}

	.user_myservice {
		margin-bottom: 24rpx;
		background: #ffffff;
		margin: 0rpx 32rpx;
		padding: 0rpx 0rpx;
		margin-bottom: 24rpx;
		display: flex;
		flex-direction: column;
		border-radius: 8rpx;
		overflow: hidden;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(77, 77, 77, 0.1);

		>text {
			padding: 24rpx 30rpx 0 30rpx;
			font-size: 32rpx;
			color: #333333;
			padding-bottom: 20rpx;
			font-weight: bold;
		}

		.user_myservice_content {
			display: flex;
			flex-wrap: wrap;

			>view,
			>button {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #333333;
				font-size: 24rpx;
				width: 25%;
				padding: 30rpx 0rpx;
				line-height: inherit;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.popup_box {
		padding: 40rpx 50rpx;
		background-color: #fff;
		width: 630rpx;
		border-radius: 20rpx;
	}

	.popup_title {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		view {
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
		}

		text {
			margin-top: 12rpx;
			text-align: center;
			font-size: 24rpx;
			color: #cccccc;
		}
	}

	.sign_box {
		display: flex;
		flex-wrap: wrap;
		width: 530rpx;

		.sign_item_box {
			margin-top: 32rpx;
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.sign_item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.sign_day {
				font-size: 24rpx;
				color: #999999;
			}

			.sign_img_box {
				flex-shrink: 1;
				position: relative;

				image {
					margin: 10rpx;
					width: 74rpx;
					height: 74rpx;
					//background-color: #cccccc;
				}

				.signed {
					position: absolute;
					bottom: -14rpx;
					right: -10rpx;
					background-image: url(../../static/icon/ic_signin_success.png);
					width: 46rpx;
					height: 32rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.unsign {
					opacity: 0.3;
				}
			}

			text {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #333333;
			}

			.unsign {
				color: #999999;
			}

			&:nth-child(5) {
				margin-left: 65rpx;
			}
		}
	}

	.sign_rule {
		margin-top: 68rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
</style>
